<template>
    <div class="applyAfterSales-page">
        <div class="order-list" >
          <!-- <div class="order-title dis-sp">
            <div class="order-title-left rx-sc">
              <img src="../../assets/order/shop-icon.png" />
              <div class=""></div>
            </div>
            <div class="order-title-right" :style="orderInfo.orderStatus==5?'color:#8A8B90':'color:#DB1919'">{{orderInfo.orderStatus==1?'待付款':orderInfo.orderStatus==2?'待发货':orderInfo.orderStatus==3?'待收货':orderInfo.orderStatus==4?'已完成':orderInfo.orderStatus==5?'已关闭':'未知'}}</div>
          </div> -->
            <div class="order-content dis-sp-s">
                <div class="order-goods rx-ss">
                    <div class="goods-img" :style="{backgroundImage:'url('+goodsInfo.mainPhoto+')'}">
                    </div>
                <div class="goods-detail">
                    <div class="goods-title">{{goodsInfo.goodsName}}</div>
                    <div class="goods-label">包邮</div>
                </div>
            </div>
            <div class="" style="text-align: right;">
                <div class="order-price">￥<span>{{goodsInfo.goodsPrice}}</span></div>
                <span class="order-num">x {{goodsInfo.goodsNum}}</span>
            </div>
        </div>
        <div class="payment">
            <div class="payment-detail dis-sp mb24" @click="switchPopup(0)">
              <div class="payment-detail-left">退款类型<span class="ml10 cor-DB1919">*</span></div>
              <div class="payment-detail-right"><span>{{refundType.title?refundType.title:'请选择'}}</span><van-icon name="arrow" /></div>
            </div>
            <div class="payment-detail dis-sp mb24" @click="switchPopup(1)" v-show="refundType.type && refundType.type != 1">
                <div class="payment-detail-left">货物状态<span class="ml10 cor-DB1919">*</span></div>
                <div class="payment-detail-right"><span>{{goodsStatus.text?goodsStatus.text:'请选择'}}</span><van-icon name="arrow" /></div>
            </div>
            <div class="payment-detail dis-sp mb24" @click="switchPopup(2)" v-show="refundType.type">
                <div class="payment-detail-left">退款原因<span class="ml10 cor-DB1919">*</span></div>
                <div class="payment-detail-right"><span>{{refundReasons.text?refundReasons.text:'请选择'}}</span><van-icon name="arrow" /></div>
            </div>
            <div class="payment-detail dis-sp" v-show="refundType.type">
                <div class="payment-detail-left">退款金额<span class="ml10 cor-DB1919">*</span></div>
                <div class="payment-detail-right ft40 fwb">￥{{maxPrice}}</div>
            </div>
        </div>
        <div class="payment" v-show="refundType.type">
            <div class="payment-detail dis-sp mb24">
                <div class="payment-detail-right ft24 flex1"><van-field label-width="5rem" style="padding:0" v-model="refExplain" label="详细描述" rows="1" autosize type="textarea" placeholder="（选填）补充描述，有助于商家更好的处理" input-align="right" /></div>
            </div>
        </div>
        <div class="payment" v-show="refundType.type">
            <div class="payment-detail dis-sp mb24">
                <div class="payment-detail-left">上传凭证<span class="ml10">（选填，最多3张）</span></div>
            </div>
            <div class="payment-detail dis-sp mb24">
                <div class="payment-detail-left"><van-uploader v-model="fileList" multiple :max-count="3" @delete="onDelete" :after-read="afterRead" /></div>
            </div>
        </div>
        <div class="submit" @click="submitBtn">
          <div class="submit-btn fwb ft32" :class="refundType.title&&goodsStatus.text&&refundReasons.text?'submit-btn-bg':'submit-btn-bg1'">提交</div>
        </div>
    </div>
    
    <!-- <van-action-sheet v-model="show" title="标题">
      <div class="content">内容</div>
    </van-action-sheet> -->
    <van-action-sheet
      :title="showBoxNum==0?'退款类型':showBoxNum==1?'货物状态':showBoxNum==2?'退款原因':'标题'"
      v-model="showBox"
      close-on-click-action
      @cancel="onCancel"
      >
      <div class="content" v-show="showBoxNum==0">
        <van-radio-group v-model="selectType.type">
          <van-cell-group>
            <van-cell clickable v-for="(item,index) in refundTypeLi" :key="index" :title="item.title" @click="selectRefundType(item)">
              <template #right-icon>
                <van-radio :name="item.type" checked-color="#DB1919"/>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="content" v-show="showBoxNum==1">
        <van-radio-group v-model="selectType.val">
          <van-cell-group>
            <van-cell clickable v-for="(item,index) in goodsStatusLi" :key="index" :title="item.text" @click="selectRefundType(item)">
              <template #right-icon>
                <van-radio :name="item.val" checked-color="#DB1919"/>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="content" v-show="showBoxNum==2">
        <van-radio-group v-model="selectType.var">
          <van-cell-group>
            <van-cell clickable v-for="(item,index) in refundReasonsLi" :key="index" :title="item.text" @click="selectRefundType(item)">
              <template #right-icon>
                <van-radio :name="item.var" checked-color="#DB1919"/>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="confirmBtn" @click="confirmSelect()">确定</div>
    </van-action-sheet>
  </div>
</template>

<script>
import $api from "@/api/index";
import http from "@/utils/request"
import {Toast } from "vant"
export default {
  name: "OrderList",
  components: {
  },
  data() {
    return {
      selectType:{},
      refundType:{},
      refundTypeLi:[],
      goodsStatus:{},
      goodsStatusLi:[],
      refundReasons:{},
      refundReasonsLi:[],
      maxPrice:0,
      fileList:[],
      showBox:false,
      showBoxNum:false,
      goodsInfo:{},
      radio:false,
      refExplain:'',
      voucherLi:[]
    };
  },
  created(){
    console.log()
    let goodsInfo = this.$route.params.data
    if(goodsInfo){
      this.goodsInfo = JSON.parse(goodsInfo)
    }
    this.getRefundType()
  },
  methods: {
    confirmSelect(){
      if(this.showBoxNum == 0){
        this.refundType = this.selectType
        this.goodsStatus = {}
        this.refundReasons = {}
        this.getApplyDetail()
      }
      if(this.showBoxNum == 1){
        this.goodsStatus = this.selectType
      }
      if(this.showBoxNum == 2){
        this.refundReasons = this.selectType
      }
      this.onCancel()
    },
    selectRefundType(item){
      this.selectType = item
    },
    getRefundType(){
      $api.orderApi.getRefundTypeLi({orderId:this.goodsInfo.orderId}).then((res)=>{
            if(res.status == 10000){
              console.log(res.data)
              this.refundTypeLi = res.data.types
            }
        })
    },
    getApplyDetail(){
        $api.orderApi.applyDetail({orderId:this.goodsInfo.orderId,type:this.selectType.type}).then((res)=>{
            if(res.status == 10000){
                // this.goodsInfo = res.data.goodsInfo
                this.goodsStatusLi = res.data.goodsStatus 
                this.refundReasonsLi = res.data.refundReasons 
                this.maxPrice = res.data.maxPrice
            }
        })
    },
    switchType(){},
    switchPopup(showBoxNum){
      if(this.showBoxNum == 0){
        this.selectType = this.refundType
        if(this.selectType.type == 1){
          this.goodsStatus.text = '未收到货'
        }
      }
      if(this.showBoxNum == 1){
        this.selectType = this.goodsStatus
      }
      if(this.showBoxNum == 2){
        this.selectType = this.refundReasons
      }
      this.showBoxNum = showBoxNum
      this.showBox = true
    },
    onCancel(){
      this.selectType = {}
      this.showBox = false;
    },
    //提交售后申请
    submitBtn(){
      let params = {
        orderId:this.goodsInfo.orderId,
        type:this.refundType.type,
        
        refExplain:this.refExplain,
        reason:{id:this.refundReasons.var},
        refMoney:this.maxPrice,
        photos:this.voucherLi
      }
      if(this.refundType.type!=1){
        params.goodsStatus = this.goodsStatus.val
      }
      $api.orderApi.submitAfterSales(params).then((res)=>{
        if(res.status == 10000){
          this.$router.push({path:'/afterSalesList'})
        }
      })
    },
    onDelete(e,data){
      this.voucherLi.splice(data.index,1)
    },
    //图片上传
    afterRead(data){
      console.log(data.file)

      let fd = new FormData()
      fd.append('file', data.file)
      http.request({
          url: "/api/commons/file/uploadImg",
          method: "post",
          data: fd
      }).then((res)=>{
        if(res.status == 10000){
          this.voucherLi.push(res.data.originalUrl)
        }else{
          Toast({
            message: res.message,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.applyAfterSales-page {
    height: 100vh;
    background: #F7F7F7;
    .order-list {
        margin-top: 24px;
        padding: 0 0 88px 0;
        .order-content {
          background: #fff; 
          padding: 24px;
        }
    .order-goods {

      .goods-img {
        min-width:160px;
        width: 160px;
        height: 160px;
        margin-right: 24px;
        border-radius: 4px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .goods-title {
        height: 68px;
        font-size: 24px;
        color: #171823;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-right: 60px;
        margin-bottom: 36px;
        text-align: left;
      }
      .goods-label {
        width: 60px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
        border: 2px solid #DB1919;
        font-size: 20px;
        color: #DB1919;
      }
    }
    .order-price {
      color: #8A8B90;
      font-size: 20px;
      span {
        font-size: 28px;
      }
    }
    .order-num {
      font-size: 24px;
      color: #8A8B90;
    }
  }

  .payment {
    margin-top: 24px;
    background: #fff;
    font-size: 28px;
    padding: 0 24px;
    .payment-title {
      margin-bottom: 32px;
      text-align: left;
      font-weight: 500;
      color: #404040;
    }
    .payment-detail{
      padding: 32px 0;
      color: #50525A;
      .payment-detail-left{
        
      }
      .payment-detail-right{
      }
    }
  }
  .submit{
    position: absolute;
    bottom: 0;
    width: calc(100% - 48px) ;
    margin: 0 24px;
    z-index: 10;
    .submit-btn {
      width: 100%;
      height: 88px;
      line-height: 88px;
      text-align: center;
      border-radius: 4px;
      
      color: #fff;
    }
  }
  .submit-btn-bg1 {
    background: rgba(226, 226, 226, 1);
  }
  .submit-btn-bg{
    background: rgba(219, 25, 25, 1) ;
  }
  .confirmBtn {
    width: 100%;
    margin-top: 30px;
    padding: 26px 0;
    text-align:center;
    font-size: 32px;
    color: #fff;
    background: #DB1919;
  }
  .safe-area-inset-bottom {
    background: #DB1919
  }
  .cor-DB1919{
    color: #DB1919;
  }
  .flex1{
    flex: 1;
  }
  .van-popup{
    background: #fff;
  }
}
</style>